import './App.css';
import { RouterProvider } from 'react-router-dom'
import { ConfigProvider, theme } from 'antd'
import router from './router'
import { ThemeProvider, useTheme } from './context/ThemeContext'

function AppContent() {
  const { themeConfig } = useTheme()
  const { defaultAlgorithm, darkAlgorithm } = theme

  const getAlgorithm = () => {
    return themeConfig.algorithm === 'dark' ? darkAlgorithm : defaultAlgorithm
  }

  return (
    <ConfigProvider
      theme={{
        algorithm: getAlgorithm(),
        token: themeConfig.token,
        components: themeConfig.components
      }}
    >
      <div className='app'>
        {/* 引入RouterProvider容器,并将路由对象传递进来 */}
        <RouterProvider router={router} />
      </div>
    </ConfigProvider>
  )
}

function App() {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  )
}

export default App;
